<template>
    <div class="w">
        <div class="container">
            <!-- 排序和分类筛选 -->
            <!-- <div class="filter" >
                <el-form :inline="true">
                    <el-form-item  label="类型：">
                       <select v-model="roomType" >
                        <option value="">无</option>
                        <option value="classroom">教室型</option>
                        <option value="round_table">圆桌型</option>
                       </select>
                    </el-form-item>
                    <el-form-item label="价格：">
                        <select v-model="sortType" >
                            <option value="">无</option>
                            <option value="des">从高到低</option>
                            <option value="asc">从低到高</option>
                        </select>
                    </el-form-item>
                </el-form>
            </div> -->
            <div v-for="item in displayedItems" :key="item.id" class="item" >
              <img :src="item.firstImageUrl" alt="Room Item" class="item-image" @click="gotoDetail(item.roomId)">
                <div class="item-info">
                    <h2 class="item-title" @click="gotoDetail(item.roomId)">{{ item.roomName }}<el-icon><ArrowRight /></el-icon></h2>
                    <p class="item-description">类型：{{ item.type==='classroom' ? '教室型' : '圆桌型' }}</p>
                    <p class="item-description">参会人数：{{ item.attendeeCount }}   人</p>
                    <p class="item-description">所需设备：{{ item.equipmentNeeds }}</p>
                    <p class="item-description">会议时间：{{ item.startTime }}—{{ item.endTime }}</p>           
                </div>
                <div class="item-right">
                  <p class="item-status">{{ formatStatus(item.status) }}</p>
                  <p class="item-amount">￥{{ item.amount }}</p>
                  <button v-if="(item.status==='paid' && errorstatus===0) || item.status==='unpaid'" class="button-canceal" @click="handleCancel(item.id)">取消预订</button>
                  <button v-if="item.status==='unpaid'" class="button-paid" @click="gotoOrderDetail(item.id)">去支付</button>
                </div>
            </div>
            <!-- 分页组件 -->
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalCount"
            ></el-pagination>
        </div> 
        <el-dialog v-model="dialogVisible" title="填写取消订单理由">
          <el-form >
            <el-form-item label="理由">
              <el-input type="textarea" v-model="cancelReason" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="cancealOrder()">提交</el-button>
          </template>
       </el-dialog> 
    </div>
</template>

<script>
import axios from 'axios';
import { ElMessageBox } from 'element-plus';
import { ArrowRight } from "@element-plus/icons-vue";
export default {
    data() {
        return {
            RoomItems:[],
            displayedItems: [],
            currentPage: 1,
            pageSize: 10,
            totalCount: 0,
            area:undefined,
            roomType:'',
            attendeeCount:undefined,
            startTime:'',
            endTime:'',
            hasNetword:'',
            hasProjector:'',
            hasSpeaker:'',
            sortType:'',
            cancelReason:'',
            dialogVisible: false,
            id:'',
            errorstatus:0,
        };
    },
    components:{
       ArrowRight,
    },
    mounted() {
        this.fetchItems();
    },
    methods: {
        fetchItems() {
            axios.get('customer/reservation', {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    keyword:this.$route.query.keyword
                }
            })
           .then(res => {
                if (res.data.code === 200) {
                    this.RoomItems = res.data.data.records;
                    this.totalCount = res.data.data.total;
                    this.displayedItems=this.RoomItems;
                } else {
                    this.$message.error(res.data.msg || '获取失物数据列表失败！');
                }   
            });
        },
        filterItems() {
            console.log(this.startTime );
            
            this.formatTime(this.startTime);
            this.formatTime(this.endTime);
            axios.get('customer/room/page', {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    type:this.roomType,
                }
            })
           .then(res => {
                if (res.data.code === 200) {
                    
                    this.displayedItems = res.data.data.records;
                    this.totalCount = res.data.data.total;
                    
                } else {
                    this.$message.error(res.data.msg || '获取失物数据列表失败！');
                }   
            });
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.fetchItems();
        },
        gotoDetail(id) {
            let token = localStorage.getItem('token');
            if (!token) {
                ElMessageBox({
                    message: '您尚未登录，是否前往登录？',
                    type: 'warning',
                    confirmButtonText: '去登录',
                    cancelButtonText: '取消',
                    showCancelButton: true
                }).then(() => {
                    // 点击“去登录”按钮后的操作，这里假设登录页面路径为 '/login'
                    this.$router.push('/userlogin');
                }).catch(() => {
                    // 点击“取消”按钮后的操作，这里什么都不做
                });
                return;
            }
            this.$router.push({
                path: '/user/detailpage',
                query: {
                    id: id
                }
            });
        },
        sortItems() {
            this.displayedItems.sort((a, b) => {
                if (this.sortType === 'asc') {
                    return a.pricePerHour-b.pricePerHour;
                } else if(this.sortType==='des'){
                    return b.pricePerHour-a.pricePerHour;
                }
            });
        },
        formatTime(time){
          return time.replace('T',' ');
        },
        formatStatus(status){
          if(status==='paid'){
            return '已支付';
          }else if(status==='unpaid'){
            return '未支付';
          }else if(status==='under_review'){
            return '待审核';
          }else if(status==='cancelled'){
            return '已取消';
          }else if(status==='used'){
            return '已使用';
          }
        },
        handleCancel(id){
          this.dialogVisible=true;
          this.id=id;
        },
        cancealOrder(){
          axios.post('/customer/reservation/cancel',{
              id:this.id,
              cancelReason:this.cancelReason
          }).then(res=>{
            if(res.data.code===200){
               this.$message.success('提交成功！');
               this.dialogVisible=false;
               this.cancelReason='';
               this.fetchItems();
            }else {
              this.$message.error(res.data.msg || '取消订单失败');
              this.dialogVisible=false;
              if(res.data.msg==='提前取消预约申请必须至少提前24小时'){
                this.errorstatus=1;
              }
            }
          })
        },
        gotoOrderDetail(id){
          this.$router.push({
                path: '/user/orderdetailpage',
                query: {
                    id: id
                }
            });
        }
    }
};
</script>

<style scoped>
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 16px;
    cursor: pointer;
}

.item-info {
    flex: 1;
    text-align: left;
}

.item-title {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 5px;
    cursor: pointer;
}

.item-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 5px;
}

.item-create-time {
    font-size: 12px;
    color: #999;
}

.filter {
    margin-bottom: 20px;
    text-align: left
}

.filter select {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.item-right {
  float: right;
  height: 150px;
}
.item-amount {
   font-size: 22px;
   margin-top: 50px;
   color: #000000;
}
.item-status {
  margin-top: 0px;
  font-size: 16px;
   color: #949494;
}
.button-canceal {
  width: 90px;
  height: 30px;
  color: #343434;
  font-weight: 700;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 20px;
  border: solid 2px #484848;
}
.button-canceal:hover {
  transform: scale(1.02);
}
.button-paid {
  width: 90px;
  height: 30px;
  color: #169ce4;
  font-weight: 700;
  margin-top: 10px;
  margin-left: 20px;
  background-color: #fff;
  border-radius: 20px;
  border: solid 2px #169ce4;
}
.button-paid:hover {
  transform: scale(1.02);
}
</style>    